import React, { useState, useEffect } from 'react'
import { useParams, useNavigate } from 'react-router-dom'
import { NavBar } from 'react-vant'
import { Swiper, Image, Sticky, Popup, } from 'react-vant'
import style from '../styles/detail.module.css'
import axios from 'axios'
axios.defaults.baseURL = 'http://localhost:3000'

export default function Detail() {
    const [data, setData] = useState(null)
    let navigate = useNavigate()
    const [img, setImg] = useState([])

    let { id } = useParams()
    console.log(id, 'id1111111');

    useEffect(() => {
        getDetail()
    }, [])

    let getDetail = async () => {
        let res = await axios.get('/lyc/detail?id=' + id)
        console.log(res.data.data, 'res111111');
        if (res.data.code === 200) {
            setData(res.data.data)
            setImg(res.data.data.img)
        }
    }

    return (
        <div className={style.detail}>
            {/* 头部需要固定 */}
            <Sticky>
                <div className={style.header_detail}>
                    <NavBar
                        title="房屋详情"
                        leftText=""
                        rightText="首页"
                        onClickLeft={() => navigate('/houserent')}
                        onClickRight={() => navigate('/home')}
                    />
                </div>
            </Sticky>
            <div className={style.banner_detail}>
                <Swiper autoplay={9000}>
                    <div></div>
                    {img?.map((image) => (
                        <Swiper.Item key={image}>
                            <Image src={image} style={{ width: '98%', height: '6rem', margin: 'auto' }} />
                        </Swiper.Item>
                    ))}
                </Swiper>
            </div>
            <div className={style.content_detail}>
                <></>
                {data && (
                    <div>
                        <div key={data._id} className={style.content_detail_info}>
                            <h3 style={{ color: 'red', fontSize: '22px' }}>￥{data.price}/月</h3>
                            <div className={style.content_detail_title}>{data.title}</div>
                        </div>
                        
                        <div className={style.fwjs}>
                            <p style={{fontSize:'20px'}}>房屋介绍</p>
                            <div className={style.fwjs_content}>
                                <p>{data.desc}</p>
                            </div>
                        </div>
                    </div>
                )}
            </div>


        </div>
    )
}
